<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div-btn></div-btn>
  </div>


  <!-- 定义一个全局父组件模板-->
  <template id="father">
    <!-- 组件只能有一个根元素 -->
    <div style="width: 400px;height: 250px;background-color: aquamarine;">
      {{msg}}
      <son-btn @acceptmsg="receive" ></son-btn>
    </div>
  </template>


  <!-- 定义子组件模板 -->
  <template id="son">
    <!-- 组件只能有一个根元素 -->
    <div>
      <button @click="send">向父组件发送数据</button>
      {{sonMsg}}
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    //定义子组件
    const SonBtn = {
      template: "#son",
      data() {
        return {
          sonMsg: "我是子组件数据"
        }
      },
      methods:{
        send(){
          //this.$emit(自定义事件名，传给父组件的数据)
          this.$emit('acceptmsg',this.sonMsg);
        }
      }
    }

    //定义父组件
    const DivBtn = {
      template: "#father",
      data() {
        return {
          msg: "我是父组件数据"
        }
      },
      methods:{
        //opt为子组件向父组件传递的数据
        receive(opt){
          this.msg = opt
        }
      },
      //子组件注册
      components: {
        'SonBtn': SonBtn
      }
    }

    //全局组件注册
    Vue.component('DivBtn', DivBtn);
    const app = new Vue({
      el: '#app',
      data: {},
      //子组件注册
      /* components:{
        'SonBtn': SonBtn
      } */
    })

    Vue.config.devtools = true
  </script>
</body>

</html>